<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="include/public/Header::head('工作信息')"></head>
<body>
<div th:include="include/main/mainTop.html"></div>
<div class="row main_container">
    <div class="col-sm-2 col_nav">
        <div class="accordion" id="accordionNav">
            <div class="card" v-if="user.baseInfo.position=='店长'">
                <div class="card-header" id="headingOne">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            <span class="iconfont icon-dianpu"></span>
                            快递站
                        </button>
                    </h2>
                </div>
                <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionNav">
                    <div class="card-body">
                        <a th:href="@{/main}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            <span class="iconfont icon-zongti"></span>
                            总体信息
                        </a>
                        <a th:href="@{/staff}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            <span class="iconfont icon-yuangong"></span>
                            员工管理
                        </a>
                    </div>
                </div>
            </div>

            <div class="card" v-if="user.baseInfo.position=='店长'||user.baseInfo.position=='财务'">
                <div class="card-header" id="headingTwo">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                            <span class="iconfont icon-caiwu"></span>
                            财务
                        </button>
                    </h2>
                </div>
                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionNav">
                    <div class="card-body">
                        <a th:href="@{/rule}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                            <span class="iconfont icon-guize"></span>
                            规则计算
                        </a>
                        <a th:href="@{/finance}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                            <span class="iconfont icon-guize"></span>
                            财务
                        </a>
                    </div>
                </div>
            </div>
            <div class="card" v-if="user.baseInfo.position=='店长'||user.baseInfo.position=='内勤'">
                <div class="card-header" id="headingThree">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                            <span class="iconfont icon-gongzuo"></span>
                            内勤
                        </button>
                    </h2>
                </div>
                <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionNav">
                    <div class="card-body">
                        <a th:href="@{/orderPage}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                            <span class="iconfont icon-kuaidi"></span>
                            快递信息
                        </a>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" id="headingFour">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
                            <span class="iconfont icon-geren7"></span>
                            个人
                        </button>
                    </h2>
                </div>
                <div id="collapseFour" class="collapse show" aria-labelledby="headingFour" data-parent="#accordionNav">
                    <div class="card-body">
                        <a th:href="@{/job}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour" v-if="user.baseInfo.position=='快递员'||user.baseInfo.position=='财务'||user.baseInfo.position=='内勤'">
                            <span class="iconfont icon-gaiicon-"></span>
                            工作信息
                        </a>
                        <a th:href="@{/account}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
                            <span class="iconfont icon-zhanghao"></span>
                            账号信息
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-10 col_page" th:include="include/page/job.html"></div>
    <script type="text/javascript">
        $(function(){
            var data4Vue = {
                urs:'staff',
                uri: 'orderBySid',
                salary_uri:'salarys',
                all_beans:[],
                select_beans:[],
                show_beans:[],
                page_num:0,
                select_page_num:1,
                oid:'',
                username:'',
                phone:'',
                address:'',
                product:'',
                status:'',
                packet_finish_num:0,
                packet_send_num:0,
                status_val:['未派送','派送中','已签收','问题件','已处理'],
                fee:0,
                user:{baseInfo:{}},
                areas:[],
                rule:{},
                moneyDate:[],
                moneyInput:[],
                year:2021,
            };

            //ViewModel
            var vue = new Vue({
                el: '.main_container',
                data: data4Vue,
                mounted: async function(){ //mounted　表示这个 Vue 对象加载成功了
                    await this.mountInformation();
                    await this.getOrders();
                    if(Math.floor(this.user.bid/100)==1){
                        await this.mountOrder();
                    }
                    await this.mountMoney();
                },
                methods: {
                    //载入页面信息
                    mountInformation:async function () {
                        var url=this.urs+"/"+[[${session.user.sid}]]
                        await axios.get(url).then(function(response) {
                            vue.user=response.data;
                        })
                        await axios.get("areas").then(function(response) {
                            vue.areas=response.data;
                            console.log(vue.areas)
                        })
                        await axios.get("rules").then(function (response){
                            vue.rule=response.data;
                            console.log(vue.rule)
                        })
                    },
                    //载入
                    mountOrder:function (){
                        let nowMonth=new Date().getMonth();
                        console.log(1241241234132)
                        for(let bean of vue.all_beans){
                            let month=new Date(bean.date).getMonth()
                            if(month==nowMonth){
                                vue.fee+=bean.price*vue.rule.perFee;
                                console.log(bean.price)
                                console.log(vue.rule.perFee)
                                console.log(vue.fee)
                            }
                            switch (bean.status){
                                case 1:
                                    vue.packet_send_num++;
                                    break;
                                case 2:
                                    vue.packet_finish_num++;
                                    break;
                            }
                        }
                    },
                    getOrders: async function(){
                        var user_id=[[${session.user.sid}]]
                        var url=this.uri+"/"+user_id;
                        await axios.get(url).then(function(response) {
                            console.log(response.data);
                            vue.all_beans=response.data;
                            vue.select_beans=response.data;
                            vue.page_num=Math.ceil(vue.select_beans.length/15);
                            if(vue.select_beans.length<=15){
                                vue.show_beans=vue.select_beans;
                            }else {
                                vue.show_beans=vue.select_beans.slice(0,15);
                            }
                        })
                    },
                    search:function (){
                        var new_beans=[];
                        if(vue.all_beans!=0){
                            for (var bean of vue.all_beans){
                                if(vue.oid!=""){
                                    if(bean.oid.match(vue.oid)){
                                        new_beans.push(bean);
                                    }
                                }else {
                                    new_beans.push(bean);
                                }
                            }
                            vue.select_beans=new_beans;
                            new_beans=[];
                        }
                        if(vue.select_beans.length!=0&&vue.username!=""){
                            for (var bean of vue.select_beans){
                                if(bean.username.match(vue.username)){
                                    new_beans.push(bean);
                                }
                            }
                            vue.select_beans=new_beans;
                            new_beans=[];
                        }
                        if(vue.select_beans.length!=0&&vue.phone!=""){
                            for (var bean of vue.select_beans){
                                if(bean.phone.match(vue.phone)){
                                    new_beans.push(bean);
                                }
                            }
                            vue.select_beans=new_beans;
                            new_beans=[];
                        }
                        if(vue.select_beans.length!=0&&vue.address!=""){
                            for (var bean of vue.select_beans){
                                if(bean.area.areaName==vue.address){
                                    new_beans.push(bean);
                                }
                            }
                            vue.select_beans=new_beans;
                            new_beans=[];
                        }
                        if(vue.select_beans.length!=0&&vue.product!=""){
                            for (var bean of vue.select_beans){
                                if(bean.product.match(vue.product)){
                                    new_beans.push(bean);
                                }
                            }
                            vue.select_beans=new_beans;
                            new_beans=[];
                        }
                        if(vue.select_beans.length!=0&&vue.status!=""){
                            for (var bean of vue.select_beans){
                                if(vue.status==bean.status){
                                    new_beans.push(bean);
                                }
                            }
                            vue.select_beans=new_beans;
                        }
                        vue.page_num=Math.ceil(vue.select_beans.length/15);
                        vue.select_page_num=1;
                        if((vue.select_page_num*15)>=vue.select_beans.length){
                            vue.show_beans=vue.select_beans.slice(0,vue.select_beans.length);
                        }else {
                            vue.show_beans=vue.select_beans.slice(0,15);
                        }
                    },
                    jump:function (num){
                        vue.select_page_num=num;
                        if((vue.select_page_num*15)>=vue.select_beans.length){
                            vue.show_beans=vue.select_beans.slice((vue.select_page_num-1)*15,vue.select_beans.length);
                        }else {
                            vue.show_beans=vue.select_beans.slice((vue.select_page_num-1)*15,vue.select_page_num*15);
                        }
                    },
                    mountMoney:async function (){
                        this.moneyDate=[];
                        this.moneyInput=[];
                        let url=this.salary_uri+"/"+this.user.sid;
                        console.log(url)
                        let now = new Date();
                        await axios.get(url).then(function(response) {
                            console.log(response.data)
                            let money=response.data;
                            for(let n=1;n<=12;n++){
                                let flag=false;
                                if(now.getFullYear()==vue.year&&(now.getMonth()+1)==n){
                                    console.log(1)
                                    vue.moneyDate.push(now.getFullYear()+"年"+n+"月")
                                    vue.moneyInput.push(vue.roundFun(vue.user.baseInfo.salary+vue.fee+vue.packet_finish_num*vue.rule.oneFee, 2))
                                    console.log(vue.fee)
                                    flag=true;
                                }
                                for (let m of money){
                                    let time=new Date(m.date)
                                    if(time.getFullYear()==vue.year&&(time.getMonth()+1)==n){
                                        vue.moneyDate.push(time.getFullYear()+"年"+n+"月")
                                        vue.moneyInput.push(m.salary)
                                        flag=true;
                                    }
                                }
                                if (!flag){
                                    vue.moneyDate.push(vue.year+"年"+n+"月")
                                    vue.moneyInput.push(0)
                                    flag=true;
                                }
                            }
                            for(let m of money){
                                console.log(m)

                            }
                        })
                        let money_graph = document.getElementById('money_graph').getContext('2d');
                        let money_chart = new Chart(money_graph, {
                            type: 'bar',
                            data: {
                                labels:this.moneyDate,
                                datasets: [
                                    {
                                        label: '收入',
                                        data: this.moneyInput,
                                        borderColor:'red',
                                        backgroundColor:'pink',
                                        borderWidth: 1,
                                    }
                                ]
                            }
                        });
                    },
                    roundFun(value, n) {
                        return Math.round(value*Math.pow(10,n))/Math.pow(10,n);
                    }
                }
            });
        });
    </script>
</div>
</body>
</html>